import React from 'react';
import { Card, Carousel, message } from 'antd';

import { get, STORAGE, getPosition } from '../../util/comm';
import HourlyWeacther from './hourly_weather';
import { weatherUrl } from '../../util/constant';
import './index.css';
import './weather_icon.css';

const _storage = new STORAGE();

class Weather extends React.Component {
  constructor() {
    super();
    this.state = {
      city: '北京',
      weather: '',
      className: {},
    }
  }
  componentDidMount() {
    this.getCity();
  }
  getCity() {
    const position = _storage.getStorage('ReactNewsCity');
    if (position.city) {
      this.getWeather(position.city);
    } else {
      getPosition().then((res) => {
        const { city } = res;
        this.getWeather(city);
        try {
          _storage.setStorage('ReactNewsCity', { city });
        } catch (e) {
          throw e;
        }
        this.setState({
          city,
        })
      })
    }
  }
  getWeather(city) {
    const param = {
      city,
    };
    get(weatherUrl, param).then((res) => {
      if (res.status === 200 && res.data.code === 1) {
        this.setState({
          weather: res.data.data,
        })
      }
    }).catch(e => message.error(`获取天气信息失败，请稍后再试${e}`))
  }
  getHourWeather() {
    const data = [];
    if (this.state.weather) {
      const { hourly } = this.state.weather;
      for (let i = 0; i < 5; i += 1) {
        data[i] = hourly[i * 4]
      }
      data[0].time = '现在';
    }
    return data;
  }

  // 获得不同天气不同样式的class
  getClassName(weather) {
    if (weather.indexOf('雷') >= 0) {
      return {
        mainClass: 'storm',
        iconClass: 'stormy',
      }
    } else if (weather.indexOf('雪') >= 0) {
      return {
        mainClass: 'snow',
        iconClass: 'snowy',
      }
    } else if (weather.indexOf('雨') >= 0) {
      return {
        mainClass: 'rain',
        iconClass: 'rainy',
      }
    } else if (weather.indexOf('云') >= 0) {
      return {
        mainClass: 'cloud',
        iconClass: 'cloudy',
      }
    } else if (weather.indexOf('阴') >= 0) {
      return {
        mainClass: 'overcast',
        iconClass: 'cloudy',
      }
    } else if (weather.indexOf('晴') >= 0) {
      return {
        mainClass: 'sun',
        iconClass: 'sunny',
      }
    }

    return {
      mainClass: 'sun',
      iconClass: 'sunny',
    }
  }
  filter() {
    const res = [];
    if (this.state.weather) {
      const dayWeather = this.state.weather.daily;
      for (let i = 0, { length } = dayWeather; i < length; i += 1) {
        const data = {};
        const weather = dayWeather[i];
        if (weather.day.weather) {
          const dataArray = weather.date.split('-');
          data.date = `${dataArray[0]}年${dataArray[1]}月${dataArray[2]}日`;
          data.week = weather.week;
          data.city = this.state.weather.city;
          data.weather = weather.day.weather;
          data.temp = `${weather.night.templow}/${weather.day.temphigh}℃`;
          data.wind = `${weather.day.winddirect} ${weather.day.windpower}`;
          data.className = this.getClassName(data.weather);
          res.push(data);
        }
      }
    }
    return res;
  }
  render() {
    const daily = this.filter();
    const hourly = this.getHourWeather();
    return (
      <div className="weather">
        { daily.length ?
          <Card title="天气一览">
            <Carousel>
              { daily.map(item => (
                <div className={`weather-main ${item.className.mainClass}`} key={item.date}>
                  <div className="date">
                    <span className="city">{item.city}</span>
                    <span className="date">{item.date}</span>
                    <span className="weekDay">{item.week}</span>
                  </div>
                  <div className="weather-content">
                    <div className="weather-tittle ">
                      <span className={`weather-icon ${item.className.iconClass}`} />
                      <span className="weather-name">{item.weather}</span>
                      <span className="temperature">
                        {item.temp}
                      </span>
                      <span className="wind">
                        {item.wind}
                      </span>
                    </div>
                  </div>
                </div>))}
            </Carousel>
            <div className="hour-weather">
              <HourlyWeacther data={hourly} />
            </div>
          </Card> : ''
        }
      </div>
    )
  }
}
export default Weather;

